<script setup>
import { reactive, ref } from "vue";
import {Button, Popup, Form, CellGroup, Field, Radio, RadioGroup, Uploader, Toast, Image} from "vant";
import { Local } from "@/utils/storage";
import {getOssPrefix} from "@/v-api/properties";
import {register, uploadPic} from "@/v-api/login";
import {modify} from "@/v-api/my";

const userInfo = Local.get('userInfo')
const url = getOssPrefix()+userInfo.iconUrl;
const modifyForm = reactive({
  id: userInfo.userId,
  phone: "",
  password: "",
  iconUrl: url,
});
const repassword = ref('');
const oldpassword = ref('');
const showFile = ref([]);
const afterRead = async(file) => {

  modifyForm.iconUrl=await uploadPic(file);
  Local.set('iconUrl',modifyForm.iconUrl);
};

const onOversize = (files) => {
  Toast(`文件大小不能超过 ${files[0].maxSize / 1024}MB`);
};
</script>

<template>
  <div>
    <div class="profile-container">
      <Image
          round
          fit="cover"
          class="custom-border-image"
          width="130px"
          height="130px"
          :src="url"
      />
    </div>
    <Form @submit="modify(modifyForm,repassword,oldpassword)">
    <Field
        label-width="6em" label-align="left"
        name="头像"
        style="display: flex; align-items: center; justify-content: center;"
        label="头像"
        :rules="[{ required: true, message: '请上传头像' }]"
    >
      <template #input>
        <Uploader
            :after-read="afterRead"
            v-model="showFile"
            style="width: 155px;"
            multiple
            :max-size="5000 * 1024"
            @oversize="onOversize"
            :max-count="1"
            reupload
            accept="image/png, image/jpeg, image/gif, image/jpg"
            upload-text="png / jpeg / gif / jpg 格式图片"
        >
        </Uploader>
      </template>
    </Field>

    <Field label-width="6em" label-align="left"
           v-model="userInfo.username" label="用户名" disabled/>
<!--    <Field label-width="6em" label-align="left" size="large"-->
<!--           :clearable="true" v-model="oldpassword" label="旧密码" required type="password" placeholder="请输入旧密码"-->
<!--           :rules="[{ required: true, message: '请填写旧密码' }]"/>-->
    <Field label-width="6em" label-align="left" size="large"
           :clearable="true" v-model="modifyForm.phone" label="手机号" name="手机号" required placeholder="请输入手机号"
           :rules="[{ required: true, message: '请填写手机号' }]" />
    <Field label-width="6em" label-align="left" size="large"
           :clearable="true" v-model="modifyForm.password" type="password" name="新密码" label="新密码" required placeholder="密码"
           :rules="[{ required: true, message: '请填写新密码' }]" />
    <Field label-width="6em" label-align="left" size="large"
           :clearable="true" v-model="repassword" type="password" label="确认密码" required placeholder="确认密码"
           :rules="[{ required: true, message: '请填写确认密码' }]" />
    <div style="margin: 20px;">
      <Button type="success" native-type="submit" size="large" color="#a4d43f">
        确认修改
      </Button>
    </div>
    </Form>
  </div>
</template>

<style scoped>
.profile-container {

  height: 200px;
  background-image: url("@/assets/images/bg.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;

}
.custom-border-image {
  border: 10px solid #d9f2ac; /* 设置边框粗细和颜色 */
  box-sizing: border-box; /* 确保边框宽度不会增加元素的尺寸 */
}
</style>